define([],function (){
    const MenuItem = {
        template: `
        <el-sub-menu
          v-if="item.children && item.children.length > 0"
          :index="item.id"
        >
          <template #title>
          <div  @click="addMains(item)">
          <el-icon><component :is="item.icon" /></el-icon>
          <span v-if="!contract">{{ item.title }}</span>
</div>
            
          </template>
          <menu-item
            v-for="child in item.children"
            :key="child.id"
            :item="child"
            :contract="contract"
            @add-main="addMains"
          />
        </el-sub-menu>
        <el-menu-item v-else :index="item.id" @click="addMains(item)">
         <el-icon><component :is="item.icon" /></el-icon>
          <span v-if="!contract">{{ item.title }}</span>
        </el-menu-item>
      `,
        props: ['item','contract'],
        data: function(){
            return {
                active:false
            }
        },
        created(){
            // console.log(this.contract)
        },
        watch:{
            contract:{
                handler(val){
                    // console.log(val,'pppppppppppppp')
                },
                deep:true
            }
        },
        methods:{
            addMains(item){
                this.$emit('add-main',item)
            }
        }
    }
    return MenuItem
})
